<template>
  <div class="editPersonal">
    <myheader title="编辑资料">
      <span slot="left" class="iconfont iconjiantou2"></span>
    </myheader>
    <div class="header_img">
      <img :src="img" />
      <van-uploader :after-read="afterRead" />
    </div>
    <mycell title="昵称" :desc="current.nickname" @click="show=!show"></mycell>
    <van-dialog v-model="show" title="标题" show-cancel-button>
      <van-cell-group>
        <van-field :value="current.nickname" label="昵称" required placeholder="请输入用户名" />
      </van-cell-group>
    </van-dialog>
    <mycell title="密码" desc="*******"></mycell>
    <mycell title="性别" :desc="current.gender==1?'男':'女'"></mycell>
  </div>
</template>

<script>
import myaxios from "@/util/myaxios";
import { getUserDetail, upLoadFile, upUserData } from "@/api/user";
import mycell from "@/components/cell";
import myheader from "@/components/header.vue";
export default {
  components: {
    mycell,
    myheader,
  },
  data() {
    return {
      img: "",
      current: {},
      show: false,
    };
  },
  async mounted() {
    const id = this.$route.params.id;
    const url = myaxios.defaults.baseURL;
    const res = await getUserDetail(id);
    if (res.data.statusCode != 401) {
      this.current = res.data.data;
      console.log(this.current);
      this.img = url + res.data.data.head_img;
    }
  },
  methods: {
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.img = file.content;
      let formdata = new FormData();
      formdata.append("file", file.file);
      // 上传文件
      const res = await upLoadFile(formdata);
      // console.log(res);
      if (res.status == 200) {
        const id = this.$route.params.id;
        // 头像修改
        const result = await upUserData(id, { head_img: res.data.data.url });
        // console.log(result);
        this.$toast.success({
          message: "头像" + result.data.message,
          closeOnClick: true,
        });
      }
    },
  },
};
</script>

.<style lang="less" scoped>
.editPersonal {
  .header_img {
    display: flex;
    position: relative;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    img {
      width: 90/360 * 100vw;
      height: 90/360 * 100vw;
      border-radius: 50%;
    }
  }
}
/deep/.van-uploader__upload {
  width: 90/360 * 100vw;
  height: 90/360 * 100vw;
}
/deep/.van-uploader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
</style>